<template>
  <div>
    <el-card class="!border-none realtive el-card-client" shadow="never">
      <template #header>
        <el-row :gutter="10">
          <el-col :span="5">
            <el-input
              v-model="queryParams.keywords"
              class="input_style"
              clearable
              placeholder="请输入搜索关键字"
            />
          </el-col>

          <el-col :span="7">
            <daterange-picker
              v-model:startTime="queryParams.start_time"
              v-model:endTime="queryParams.end_time"
              class="input_time_style"
            />
          </el-col>
          <!-- <el-col :span="1">
              <el-checkbox class="input style input_time_style" v-model="queryParams.user_id" border />
          </el-col>-->
          <el-col :span="8">
            <el-button
              type="primary btn_style"
              @click="resetPage"
              color="#63ccba"
              class="mr_5"
            >
              <template #icon>
                <el-icon color="#fff">
                  <Search />
                </el-icon> </template
              >搜索
            </el-button>
            <el-button @click="resetParams" class="mr_5">重置</el-button>
            <el-button
              @click="resetParams"
              v-show="selectData.length"
              class="mr_5"
              type="danger"
            >
              <template #icon>
                <el-icon>
                  <Connection />
                </el-icon> </template
              >批量拉黑
            </el-button>
            <el-button
              @click="resetParams"
              v-show="selectData.length"
              class="mr_5"
              type="primary"
            >
              <template #icon>
                <el-icon>
                  <Connection />
                </el-icon> </template
              >批量拉白
            </el-button>
          </el-col>
          <!-- <el-col :span="3" class="flex justify-end">
            <move-button></move-button>
          </el-col> -->
        </el-row>
      </template>
      <div>
        <p class="title text_center fz_16 font600">{{ title }}</p>
        <el-table
          :data="pager.lists"
          border
          @selection-change="handleSelectionChange"
          v-loading="pager.loading"
          stripe
          max-height="calc(100vh - 14rem)"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="id" prop="id" align="center" width="55" />
          <el-table-column label="选手名称" prop="player_name" align="center" />
          <el-table-column label="用户昵称" prop="nickname" align="center" />
          <el-table-column label="用户头像" align="center" width="90">
            <template #default="{ row }">
              <div class="demo-image__preview">
                <el-image
                  style="width: 98%; height: 98%"
                  :src="row.avatar"
                  :preview-src-list="[row.avatar]"
                  :initial-index="0"
                  fit="cover"
                  hide-on-click-modal="true"
                  preview-teleported="true"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="地区" prop="ip_address" align="center" />
          <el-table-column label="ip" prop="ip" align="center" />
          <el-table-column label="添加时间" prop="create_time" align="center" />
        </el-table>
      </div>
      <div class="position">
        <pagination v-model="pager" @change="getLists" />
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup name="zgVotesLogLists">
import { usePaging } from "@/hooks/usePaging";
import { useDictData } from "@/hooks/useDictOptions";
import { apiZgVotesLogLists, apiZgVotesLogDelete } from "@/api/zg_votes_log";
import { timeFormat } from "@/utils/util";
import feedback from "@/utils/feedback";
import moveButton from "@/components/moveButton/index.vue";
const route = useRoute();
const title = route.query.title;
// 查询条件
const queryParams = reactive({
  user_id: "",
  keywords: "",
  start_time: "",
  end_time: "",
});

// 选中数据
const selectData = ref<any[]>([]);

// 表格选择后回调事件
const handleSelectionChange = (val: any[]) => {
  selectData.value = val.map(({ id }) => id);
};

// 获取字典数据
const { dictData } = useDictData("");

// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
  fetchFun: apiZgVotesLogLists,
  params: queryParams,
});

// 添加
const handleAdd = async () => {
  showEdit.value = true;
  await nextTick();
  editRef.value?.open("add");
};

// 编辑
const handleEdit = async (data: any) => {
  showEdit.value = true;
  await nextTick();
  editRef.value?.open("edit");
  editRef.value?.setFormData(data);
};

// 删除
const handleDelete = async (id: number | any[]) => {
  await feedback.confirm("确定要删除？");
  await apiZgVotesLogDelete({ id });
  getLists();
};

getLists();
</script>
<style lang="scss" scoped>
.flex {
  display: flex !important;
}

.input_style {
  width: 100%;
}

.align_center {
  align-content: center;
  align-items: center;
  justify-content: left !important;
}
</style>
